import React, { useState } from 'react'
import { Table, ConfigProvider, Button, Space, message } from 'antd' // 引入ConfigProvider全局化配置
import zhCN from 'antd/es/locale/zh_CN'

function useBasicTable6() {
  const [pagnationPage] = useState('bottomCenter') //改成BottomCenter
  function handleClickcaozuo(value) {
    message.success({
      content: JSON.stringify(value),
      className: 'custom-class',
      style: {
        marginTop: '20vh',
      },
    })
  }
  function handleClickDelete(value) {
    message.success({
      content: JSON.stringify(value),
      className: 'custom-class',
      style: {
        marginTop: '20vh',
      },
    })
  }
  const columns = [
    {
      title: '城市ID',
      dataIndex: 'cityId',
    },
    {
      title: '城市名称',
      dataIndex: 'cityName',
    },
    {
      title: '用车模式',
      dataIndex: 'carmodel',
    },
    {
      title: '营运模式',
      dataIndex: 'moneymodel',
    },
    {
      title: '授权加盟商',
      dataIndex: 'shouquan',
    },
    {
      title: '城市管理员',
      dataIndex: 'cityControl',
    },
    {
      title: '城市开通时间',
      dataIndex: 'cityDate',
    },
    {
      title: '操作时间',
      dataIndex: 'OprateTime',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Button
            onClick={() => {
              handleClickcaozuo(record)
            }}
          >
            修改
          </Button>
          <Button
            onClick={() => {
              handleClickDelete(record)
            }}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ]

  const data = [
    {
      key: '1',
      cityId: '001',
      cityName: '天津',
      carmodel: '指定停车模式',
      moneymodel: '加盟',
      shouquan: '已授权',
      cityControl: 'admin1',
      cityDate: '2019-06-11',
      OprateTime: '2020-09-11',
    },
    {
      key: '2',
      cityId: '002',
      cityName: '北京',
      carmodel: '指定停车模式',
      moneymodel: '加盟',
      shouquan: '已授权',
      cityControl: 'admin2',
      cityDate: '2019-07-11',
      OprateTime: '2020-09-12',
    },
    {
      key: '3',
      cityId: '003',
      cityName: '天津',
      carmodel: '指定停车模式',
      moneymodel: '加盟',
      shouquan: '未授权',
      cityControl: 'admin31',
      cityDate: '2019-08-11',
      OprateTime: '2020-09-13',
    },
    {
      key: '4',
      cityId: '004',
      cityName: '天津',
      carmodel: '指定停车模式',
      moneymodel: '加盟',
      shouquan: '已授权',
      cityControl: 'admin41',
      cityDate: '2019-09-11',
      OprateTime: '2020-09-14',
    },
    {
      key: '5',
      cityId: '005',
      cityName: '天津',
      carmodel: '指定停车模式',
      moneymodel: '加盟',
      shouquan: '已授权',
      cityControl: 'admin51',
      cityDate: '2019-10-11',
      OprateTime: '2020-09-15',
    },
  ]
  function onChange(pagination, filters, sorter, extra) {
    console.log('params', pagination, filters, sorter, extra)
  }
  //分页
  const handleClick = (current, pageSize) => {
    console.log(current, pageSize)
    console.log(`当前页是${current}`)
    console.log(`每页条数${pageSize}`)
  }
  return (
    <ConfigProvider locale={zhCN}>
      <Table
        columns={columns}
        dataSource={data}
        onChange={onChange}
        pagination={{
          position: [pagnationPage],
          defaultCurrent: 1,
          defaultPageSize: 4,
          total: 5,
          onChange: handleClick,
        }}
      />
    </ConfigProvider>
  )
}

export default useBasicTable6
